<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="static/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.css">
    <script src="static/jquery/jquery-3.2.1.js"></script>
    <script src="static/bootstrap-3.3.7/js/bootstrap.js"></script>
    <style>
        .big-box {
            position: relative;
        }
        
        .box {
            position: absolute;
            display: none;
        }
        
        .active {
            display: block;
        }
        
        .box1 {
            width: 100%;
            height: 880px;
            background-image: url(static/demo/imgs/bg-01.jpg);
        }
        
        .box2 {
            width: 100%;
            height: 880px;
            background-image: url(static/demo/imgs/bg-02.jpg);
        }
        
        .box3 {
            width: 100%;
            height: 880px;
            background-image: url(static/demo/imgs/bg-03.jpg);
        }
        
        .box4 {
            width: 100%;
            height: 880px;
            background-color: rgb(44, 52, 59)
        }
    </style>
    <script>
        window.onload = function() {
            var btns = $(".btn-group button");
            var boxs = $(".big-box .box");
            for (var i = 0; i < btns.length; i++) {
                console.log(btns[i]);
                $(btns[i]).on("click", function(e) {
                    var index = $(this).attr("index");
                    for (var j = 0; j < boxs.length; j++) {
                        boxs.eq(j).removeClass("active");
                    }
                    boxs.eq(index).addClass("active");
                })
            }
        }
    </script>
</head>

<body>
    <div class="container navbar-fixed-top">
        <div class="btn-group fixed-top">
            <button index="0" class="btn btn-lg">首页</button>
            <button index="1" class="btn btn-lg">关于</button>
            <button index="2" class="btn btn-lg">相册</button>
            <button index="3" class="btn btn-lg">关于</button>
        </div>
    </div>
    <div class="big-box">
        <div class="box box1 active">
            <div class="container">
                <i class="fa fa-camera fa-3" aria-hidden="true"></i>
                <h1>主页</h1>
                <div class="row">

                    <div class="col-sm-12">
                        <div class="widget-box">
                            <div class="widget-body">超级月亮（Supermoon）是1979年由美国占星师理查德·诺艾尔提出的名词，是一种新月或满月时月亮位于近地点附近的现象，月亮位于近地点时正好出现新月，称为超级新月；月亮位于近地点时正好满月，称为超级满月。 不过，新月在在农历的每月初一出现,当月亮运行到太阳与地球之间的时候,月亮以它黑暗的一面对着地球,并且与太阳同升同没,人们无法看到它。尽管这时月球的确是离地球近了些，但是它的实际大小并没有发生变化，人们也不能看到它，因此，这样叫超级新月并没有意义，其和普通新月给人的印象并没有什么不同。
                                截止目前为止，很多主流天文学家们并不赞同“超级月亮”、“超-超级月亮”的称谓，因为从科学定义而言，叫做近地点满月更为准确。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box box2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header">超级月亮</div>
                            <div class="widget-body">超级月亮（Supermoon）是1979年由美国占星师理查德·诺艾尔提出的名词，是一种新月或满月时月亮位于近地点附近的现象，月亮位于近地点时正好出现新月，称为超级新月；月亮位于近地点时正好满月，称为超级满月。 不过，新月在在农历的每月初一出现,当月亮运行到太阳与地球之间的时候,月亮以它黑暗的一面对着地球,并且与太阳同升同没,人们无法看到它。尽管这时月球的确是离地球近了些，但是它的实际大小并没有发生变化，人们也不能看到它，因此，这样叫超级新月并没有意义，其和普通新月给人的印象并没有什么不同。
                                截止目前为止，很多主流天文学家们并不赞同“超级月亮”、“超-超级月亮”的称谓，因为从科学定义而言，叫做近地点满月更为准确。
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header">超级月亮</div>
                            <div class="widget-body">超级月亮（Supermoon）是1979年由美国占星师理查德·诺艾尔提出的名词，是一种新月或满月时月亮位于近地点附近的现象，月亮位于近地点时正好出现新月，称为超级新月；月亮位于近地点时正好满月，称为超级满月。 不过，新月在在农历的每月初一出现,当月亮运行到太阳与地球之间的时候,月亮以它黑暗的一面对着地球,并且与太阳同升同没,人们无法看到它。尽管这时月球的确是离地球近了些，但是它的实际大小并没有发生变化，人们也不能看到它，因此，这样叫超级新月并没有意义，其和普通新月给人的印象并没有什么不同。
                                截止目前为止，很多主流天文学家们并不赞同“超级月亮”、“超-超级月亮”的称谓，因为从科学定义而言，叫做近地点满月更为准确。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box box3">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-01-tn.jpg" width="100%">
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-02-tn.jpg" width="100%">
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-03-tn.jpg" width="100%">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-04-tn.jpg" width="100%">
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-05-tn.jpg" width="100%">
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <img src="static/demo/imgs/tm-img-06-tn.jpg" width="100%">
                    </div>
                </div>
            </div>
        </div>
        <div class="box box4">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-01-tn.jpg">
                    </div>
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-02-tn.jpg">
                    </div>
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-03-tn.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-04-tn.jpg">
                    </div>
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-05-tn.jpg">
                    </div>
                    <div class="col-sm-4">
                        <img src="static/demo/imgs/tm-img-06-tn.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>